/**
 * 创建一个文本节点
 * @param {string} text - 节点的文本内容
 * @returns {Object} - 表示文本节点的虚拟 DOM
 */
function createTextNode(text) {
  return {
    type: "TEXT_ELEMENT",
    props: {
      nodeValue: text,
      children: [],
    },
  };
}

/**
 * 创建一个元素对象
 * @param {string} type - 元素类型
 * @param {Object} props - 元素属性
 * @param {...any} children - 子元素
 * @returns {Object} - 表示元素的虚拟 DOM
 */
function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map((child) => {
        return typeof child === "string" ? createTextNode(child) : child;
      }),
    },
  };
}

/**
 * 渲染函数: 将虚拟 DOM 转换成真实 DOM
 * @param {Object} el - 元素的虚拟 DOM
 * @param {HTMLElement} container - 元素要插入的容器
 */
function render(el, container) {
  const dom =
    el.type === "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(el.type);

  Object.keys(el.props).forEach((key) => {
    if (key !== "children") {
      dom[key] = el.props[key];
    }
  });

  const children = el.props.children;
  children.forEach((child) => {
    render(child, dom);
  });

  container.append(dom);
}

const React = {
  render,
  createElement,
};

export default React;
